<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<p>我的订单</p>
			<!-- 返回键 -->
			<GoBackButton></GoBackButton>
		</header>

		<!-- 订单列表部分 -->
		<!-- vue2中v-for v-if是同一优先级的，先后使用不会出问题 -->
		<!-- vue3中v-if的优先级比v-for高，所以原来的语句先访问v-if，结果此时并没有item这个数据，报错 -->
		<!-- 解决方法是把v-if嵌套在v-for里面 -->
		<h3>未支付订单信息：</h3>
		<ul class="order">
			<li v-for="item in orderArr">
				<div v-if="item.orderState==0">
					<div class="order-info">
						<p>
							{{item.business.businessName}}
							<i class="fa fa-caret-down" @click="detailetShow(item)"></i>
						</p>
						<div class="order-info-right">
							<p>&#165;{{item.orderTotal.toFixed(2)}}</p>
							<div class="order-info-right-icon" @click="toPayment(item)">去支付</div>
							<i class="fa fa-remove" @click="deleteOrder(item.orderId)"></i>
						</div>
					</div>
					<ul class="order-detailet" v-show="item.isShowDetailet">
						<li v-for="odItem in item.list">
							<p>{{odItem.foodName}} x {{odItem.quantity}}</p>
							<p>&#165;{{(odItem.foodPrice*odItem.quantity).toFixed(2)}}</p>
						</li>
						<li>
							<p>配送费</p>
							<p>&#165;{{item.business.deliveryPrice.toFixed(2)}}</p>
						</li>
					</ul>
				</div>
			</li>
		</ul>

		<h3>已支付订单信息：</h3>
		<ul class="order">
			<li v-for="item in orderArr">
				<div v-if="item.orderState==1">
					<div class="order-info">
						<p>
							{{item.business.businessName}}
							<i class="fa fa-caret-down" @click="detailetShow(item)"></i>
						</p>
						<div class="order-info-right">
							<p>&#165;{{item.orderTotal}}</p>
							<i class="fa fa-remove" @click="deleteOrder(item.orderId)"></i>
						</div>
					</div>
					<ul class="order-detailet" v-show="item.isShowDetailet">
						<li v-for="odItem in item.list">
							<p>{{odItem.foodName}} x {{odItem.quantity}}</p>
							<p>&#165;{{(odItem.foodPrice*odItem.quantity).toFixed(2)}}</p>
						</li>
						<li>
							<p>配送费</p>
							<p>&#165;{{item.business.deliveryPrice.toFixed(2)}}</p>
						</li>
					</ul>
				</div>
			</li>
		</ul>


		<!-- 底部菜单部分 -->
		<Footer></Footer>

	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';
	import GoBackButton from '../components/GoBackButton.vue';

	export default {
		name: 'OrderList',
		data() {
			return {
				orderArr: [],
				user: {}
			}
		},
		created() {
			//获取当前用户名
			this.user = this.$getSessionStorage('user');

			this.$axios.get('orders/user/' + this.user.userId).then(response => {
				let result = response.data;
				for (let orders of result) {
					orders.isShowDetailet = false;
					

				}
				this.orderArr = result;
			}).catch(error => {
				console.error(error);
			});

		},
		methods: {
			detailetShow(orders) {
				orders.isShowDetailet = !orders.isShowDetailet;
			},

			toPayment(orders) {
				this.$router.push({
					path: '/payment',
					query: {
						orderId: orders.orderId
					}
				});
			},
			
			deleteOrder(orderId) {
				this.$axios.delete(
					'orders',
					{
						data: {
							orderId: orderId
						},
						headers: {
							'Content-Type': "application/json"
						}
					}
				).then(response => {
					if (response.data > 0) {
						alert('删除订单成功！');
						this.$router.go(0);
					} else {
						alert('删除订单失败！');
					}
				}).catch(error => {
					console.error(error);
				});
			}

		},
		components: {
			Footer,
			GoBackButton
		}
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	/****************** 历史订单列表部分 ******************/
	.wrapper h3 {
		margin-top: 12vw;
		box-sizing: border-box;
		padding: 4vw;
		font-size: 4vw;
		font-weight: 300;
		color: #999;
	}

	.wrapper .order {
		width: 100%;
	}

	.wrapper .order li {
		width: 100%;
	}

	.wrapper .order li .order-info {
		box-sizing: border-box;
		padding: 2vw 4vw;
		font-size: 4vw;
		color: #666;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.wrapper .order li .order-info .fa-remove {
		margin-left: 2vw;
		font-size: 5vw;
	}

	.wrapper .order li .order-info .order-info-right {
		display: flex;
	}

	.wrapper .order li .order-info .order-info-right .order-info-right-icon {
		background-color: #f90;
		color: #fff;
		border-radius: 3px;
		margin-left: 2vw;
		user-select: none;
		cursor: pointer;
	}

	.wrapper .order li .order-detailet {
		width: 100%;
	}

	.wrapper .order li .order-detailet li {
		width: 100%;
		box-sizing: border-box;
		padding: 1vw 4vw;
		color: #666;
		font-size: 3vw;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
